<template>
	<view>
		<nav-bars title="商品详情"></nav-bars>
		<view class="swiperBox" style="position: relative;">
			<!-- <u-swiper height="750" duration="3000" interval="4000" :list="list" mode="number" indicator-pos="bottomRight"></u-swiper> -->
			<swiper class="swiper" :indicator-dots="false" autoplay circular indicator-active-color="#C3AB7C"
				@change="SwiperChanege">
				<swiper-item v-for="(item,index) in list" :key="index">
					<image :src="item.image_path"></image>
				</swiper-item>
			</swiper>
			<view class="SwiperDots" style="display: flex;align-items: center;">
				<!-- <view></view> -->
				{{list.length == 0 ? SwiperIndex :SwiperIndex+1}}/{{list.length}}
			</view>
		</view>
		<view class="GoodsMessage">
			<view class="GoodsFX">创客分销改价</view>
			<view class="GoodsPrice">
				<view class="GoodsPriceText">底价</view>
				<view>
					￥
					<text class="GoodsPriceMun">{{goodsInfo.price}}</text>
				</view>
			</view>
			<view class="GoodsShopPrice">
				市场价￥3699
			</view>
			<view class="GoodsTitle">
				北欧简约现代科技布艺沙发三人小户型客厅两用沙发</view>
			<view class="GoodsSku">
				<view class="GoodsSkuText">
					选择</view>
				<view class="GoodsSkuView">
					<view class="GoodsSkuList">
						<view class="GoodsSkuText">规格分类</view>
						<!-- <text class="iconfont icon-more" style="margin-top: -2rpx;"></text> -->
						<view class="g_iIcon">
							<image src="/static/common/icon_more.png"></image>
						</view>
					</view>
					<view class="GoodsSkuSelect">
						<view class="GoodsSkuItem">
							<view class="GoodsSkuFor" v-if="goodsInfo.specs_type == 1">
								<image :src="goodsInfo.main_imgurl" mode=""></image>
							</view>
							<view v-if="goodsInfo.specs_type == 2" class="GoodsSkuFor" v-for="item in 3" :key="item">
								<image src="" mode=""></image>
							</view>
						</view>
						<view class="GoodsSkuTotal">
							共有3种规格分类可选</view>
					</view>
				</view>
			</view>
		</view>


		<view class="DividerLine">
			<u-divider color="#999999" bg-color="#f1f1f1" border-color="#ccc" fontSize="28">商品详情</u-divider>
		</view>
		<view class="GoodsDetaile">
			<view class="DetaileMessage">
				1dasdasdasdasdas
			</view>
		</view>
		<view class="BottomBar">
			<view class="BottomBarView">
				<view class="BottomBarBtn">
					分销改价
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	import service_distribution from '@/service/distribution.js'
	export default {
		name: '',
		components: {},
		data() {
			return {
				product_id: null,
				list: [],
				goodsInfo: null,
				// 规格
				sizePop: false,
				sizeImage: null, // 规格图片
				sizePrice: null, // 规格价格
				sizeNum: 1,
				// 清单
				cart: null,
				child: '',
				is_show_model: false, //是否显示分享模态窗
				shaegood: '',
				specif: '',
				html: '',
				sku_id: '',
				keys: [],
				sharecode: '',
				SwiperIndex: 0
			};
		},
		onLoad(options) {
			var that = this
			that.product_id = options.product_id
			that.getChangeDetaileBefore()
		},
		methods: {
			// 轮播切换index
			SwiperChanege(e) {
				this.SwiperIndex = e.detail.current
			},
			// 改价之前的详情
			getChangeDetaileBefore() {
				var that = this
				let params = {
					id: that.product_id,
				}
				service_distribution.DetaileBefore(params)
					.then(res => {
						if (res.code == 1) {
							console.log(res.data)
							that.goodsInfo = res.data
							that.list = res.data.round_imgs
						} else {
							that.$utils.showErr({
								title: res.msg
							})
						}
					})

			},
			// 改价之后的详情
			getChangeDetaileAfter() {

			},
		},
	};
</script>
<style lang="scss">
	page {
		background: #f1f1f1;
	}

	.swiperBox {
		width: 100%;
		height: 556rpx;
		overflow: hidden;
		// margin: 30rpx auto 20rpx;
		// box-shadow: 0px 4rpx 14rpx 0px #F1F1F1;

		.swiper {
			image {
				width: 100%;
				height: 556rpx;
			}
		}

		.SwiperDots {
			position: absolute;
			bottom: 16rpx;
			right: 32rpx;
			border-radius: 30rpx;
			background: rgba(0, 0, 0, .5);
			padding: 12rpx 24rpx;
			font-size: 22rpx;
			font-weight: 500;
			color: #FEFEFE;
			text-align: center;
		}
	}

	.GoodsMessage {
		background: #fff;
		margin: 32rpx;
		box-shadow: 0rpx 2rpx 14rpx 0rpx #F1F1F1;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 40rpx 20rpx 32rpx 20rpx;

		.GoodsFX {
			font-size: 28rpx;
			font-weight: 500;
			color: #F66036;
			margin-bottom: 18rpx;
		}

		.GoodsPrice {
			font-size: 24rpx;
			font-weight: bold;
			color: #F66036;
			display: flex;
			align-items: flex-end;
			margin-bottom: 18rpx;

			.GoodsPriceText {
				margin-right: 10rpx;
			}

			.GoodsPriceMun {
				font-size: 44rpx;
				font-weight: 800;
				color: #F66036;
			}
		}

		.GoodsShopPrice {
			font-size: 24rpx;
			font-weight: 500;
			text-decoration: line-through;
			color: #666666;
			margin-bottom: 39rpx;
		}

		.GoodsTitle {
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
			text-align: justify;
			margin-bottom: 50rpx;
		}

		.GoodsSku {
			display: flex;
			align-items: flex-start;

			.GoodsSkuText {
				margin-right: 48rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
				width: max-content;
			}

			.GoodsSkuView {
				flex: 1;

				.GoodsSkuList {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 14rpx;

					.GoodsSkuText {
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
					}

					.g_iIcon {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.GoodsSkuSelect {
					display: flex;
					align-items: center;
					justify-content:space-between;
					flex: 1;

					.GoodsSkuItem {
						display: flex;
						align-items: center;
					}

					.GoodsSkuFor {
						width: 70rpx;
						height: 70rpx;
						// background: #18B566;
						border-radius: 5rpx;
						margin-right: 10rpx;
					}

					.GoodsSkuTotal {
						font-size: 28rpx;
						font-weight: 500;
						color: #999999;
						padding: 20rpx 22rpx;
						background: #F1F1F1;
						border-radius: 10rpx;
						width: max-content;
					}
				}
			}
		}
	}

	.DividerLine {
		margin: 50rpx 0 42rpx 0;
	}

	.GoodsDetaile {
		margin: 0rpx 32rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.DetaileMessage {
			padding-bottom: 142rpx;
		}
	}

	.BottomBar {
		position: fixed;
		bottom: 0;
		background: #fff;
		width: 100%;
		padding: 10rpx 32rpx 12rpx 32rpx;

		.BottomBarView {
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}

		.BottomBarBtn {
			height: 74rpx;
			background: #C3AB7C;
			border-radius: 37rpx;
			text-align: center;
			line-height: 74rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>
